<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="" id="user_form">
    </form>
    <script type="text/template" id="tpl">
        <div>
            <label for="">用户名</label>
            <input type="text" name="" id="" value="{{ user.username }}">
        </div>
        <div>
            <label for="">年龄</label>
            <input type="text" name="" id="" value="{{ user.age }}">
        </div>
        <div>
            <label for="">职业</label>
            <select name="" id="">
                {{ each jobs }}
                {{ if user.job == $value.id }}
                <option value="{{ $value.id }}" selected>{{ $value.name }}</option>
                {{ else }}
                <option value="{{ $value.id }}">{{ $value.name }}</option>
                {{ /if }}
                {{ /each }}
            </select>
        </div>
    </script>

    <script src="node_modules/art-template/lib/template-web.js"></script>
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script>
    // 用户表
    //  其中一个接口获取用户数据
    // 职业信息表
    //  其中一个接口获取所有的职业信息

    // 方法一
    // get('http://127.0.0.1:3000/users/1', function (userData) {
    //     get('http://127.0.0.1:3000/jobs', function (jobData) {
    //         var htmlStr = template('tpl', {
    //             user: JSON.parse(userData),
    //             jobs: JSON.parse(jobData)
    //         })
    //         document.querySelector('#user_form').innerHTML = htmlStr
    //     })
    // })


    // 方法二
    var data = {}
    $.get('http://127.0.0.1:3000/users/1')
        .then(function (user) {
            data.user = user
            return $.get('http://127.0.0.1:3000/jobs')
        })
        .then(function (jobs) {
            data.jobs = jobs
            var htmlStr = template('tpl', data)
            document.querySelector('#user_form').innerHTML = htmlStr
        })


    // 这个 get 是 callback 方式的 API
    // 可以使用 Promise 来解决这个问题
    function get(url, callback) {
        var oReq = new XMLHttpRequest()
        // 当请求加载成功之后要调用指定的函数
        oReq.onload = function () {
            // 我现在需要得到这里的 oReq.responseText
            callback(oReq.responseText)
        }
        oReq.open("get", url, true)
        oReq.send()
    }
    </script>
</body>
</html>